<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>注册</title>
	<link rel="stylesheet" type="text/css" href="<?php echo CSS; ?>/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="./tempelte/layui/css/layui.css">
	<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
	<script type="text/javascript" src="<?php echo JS; ?>/bootstrap.min.js"></script>
	<script type="text/javascript" src="./tempelte/layui/layui.js"></script>
	<style type="text/css">
		
		.red{
			color: red;
			line-height: 34px;
		}
	</style>
</head>
<body>

	<span class="glyphicon glyphicon-star" aria-hidden="true"></span>
	<!-- Button trigger modal -->
<button type="button" class="btn btn-danger btn-sm " data-toggle="modal" data-target="#myModal">
  注册
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">用户注册</h4>
      </div>
      <div class="modal-body layui-form">
       <form class="form-horizontal" id="regForm" action="./addUser.php" method="post">
		  <div class="form-group">
		    <label for="inputEmail3" class="col-sm-2 control-label">用户名</label>
		    <div class="col-sm-4">
		      <input type="text" class="form-control" id="username" lay-verify="required" placeholder="用户名" name="username">
		    </div>
		    <div class="col-sm-6 red" id="uInfo">
		    	
		    </div>
		  </div>
		  <div class="form-group">
		    <label for="inputEmail3" class="col-sm-2 control-label">手机</label>
		    <div class="col-sm-4">
		      <input type="text" class="form-control" id="phone" lay-verify="phone" placeholder="用户名" name="phone">
		    </div>
		    <div class="col-sm-6 red" id="pInfo">
		    	
		    </div>
		  </div>
		  <div class="form-group">
		    <label for="inputPassword3" class="col-sm-2 control-label">密码</label>
		    <div class="col-sm-4">
		      <input type="password" class="form-control" id="inputPassword3" placeholder="密码" name='password' lay-verify="required">
		    </div>
		    <div class="col-sm-6 red">
		    	
		    </div>
		  </div>
		  <div class="form-group">
		    <label for="inputPassword3" class="col-sm-2 control-label">验证码</label>
		    <div class="col-sm-4">
		      <input type="text" class="form-control"  placeholder="密码" lay-verify="required" id="code" name='code'>
		    </div>
		    <div class="col-sm-6 red" id="cinfo">
		    	
		    </div>
		  </div>
		  <div class="form-group">
		    <label for="inputPassword3" class="col-sm-2 control-label"></label>
		    <div class="col-sm-4">
		      <img id="codeImg" src="http://127.0.0.1/P201801/msg/lib/images.php" width="120">
		    </div>
		  </div>
		  <!--  -->
		  <div class="form-group">
		    <div class="col-sm-offset-2 col-sm-10">
		      <button type="button" class="btn btn-default" id="reg" lay-submit lay-filter="reg">注册</button>
		    </div>
		  </div>
		</form>
      </div>

      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript">
	
	layui.use('form', function(){
	  var form = layui.form;
	  
	  //监听提交
	  form.on('submit(reg)', function(data){
	  	$.ajax({
	  		url: './checkReg.php',//指定请求的地址
			type: 'POST',//请求方式
			dataType: 'json',//返回的类型
			data:data.field,
	  	})
	  	.done(function(res) {
	  		if(res.error>0){
	  			layer.msg(res.info,function(){});
	  		}else{
	  			layer.alert(res.info,function () {
	  				location.href = "./login.php";
	  			})
	  		}
	  	})
	  	.fail(function() {
	  	})
	  	
	    // layer.msg(JSON.stringify(data.field));
	    return false;
	  });
	});
</script>

<script type="text/javascript">
		
	// $(function(){

	// 	$('#codeImg').click(function () {
	// 		this.src = this.src+"?"+Math.random();
	// 	})

	// 	$('#reg').click(function(event) {

	// 		$('.red').html("");

	// 		username = $('#username').val();

	// 		phone = $('#phone').val();

	// 		code = $('#code').val();

	// 		u_preg = /^[A-Za-z]\w{4,6}[A-Za-z0-9]$/;

	// 		if(!u_preg.test(username)){
	// 			$('#uInfo').html('<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>用户名由6-8数字字母下划线组合')
	// 		}

	// 		p_preg = /^1(30|31|55|89|81)\d{8}$/;

	// 		if(!p_preg.test(phone)){
	// 			$('#pInfo').html('<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>手机格式不正确')
	// 		}


	// 		$.ajax({
	// 			url: './checkReg.php',//指定请求的地址
	// 			type: 'POST',//请求方式
	// 			dataType: 'json',//返回的类型
	// 			data: {username: username,code:code},//post的数据
	// 		})
	// 		.done(function(res) {
	// 			if(res.error==1){
	// 				$('#uInfo').html('<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>'+res.info);
	// 			}else if(res.error==2){
	// 				$('#cinfo').html('<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>'+res.info);	
	// 			}else{
	// 				if($('.glyphicon-remove').length==0){
	// 					$('#regForm').submit();
	// 				}
	// 			}
	// 			console.log("success");
	// 		})
	// 		.fail(function() {
	// 			alert("服务器异常，请稍后再试");
	// 		})
			



			
	// 		// alert(username);
	// 		// alert(phone);
	// 	});

	// })
</script>
</html>
